/*
Website Url:https://www.muziang.com/
*/
article, aside, details, figcaption, figure, footer, header, main, nav, section {display:block;}
div,html,body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td, hr, button, article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, main {margin:0; padding:0;}
body {background-color:#fff; font:100%/1.5em 'Microsoft Yahei Light','Microsoft Yahei',Arial,tahoma; word-break: break-all;}
a {text-decoration:none; outline:none; -webkit-tap-highlight-color:transparent; color:#333;}
a:hover {color:#000;}
input, textarea {-webkit-appearance:none; border:0;}
input:focus, textarea:focus {outline:none;}
li {list-style:none;}
.clear {clear:both;}
a img {border:none;}
table {background-color: transparent; border-spacing: 0; border-collapse: collapse; font-size:16px; width:100%;border-top:solid 1px #ededed;border-left:solid 1px #ededed; box-sizing: border-box;}
table th{background-color:#f9f9f9;text-align:center; box-sizing: border-box;}
table td,table th{padding:10px;border:1px solid #ededed; box-sizing: border-box;}
/*gold*/
.inner {width:93.75%; margin:0 auto;}
/*pagenavi*/
.pagenavi {font-size:0; line-height: normal; text-align:center;}
.pagenavi a, .pagenavi span.now-page {display:inline-block; font-size:14px; height:32px; line-height: 32px; padding:0 15px; background-color:#eee; color:#333; margin:2px; border-radius:3px;}
.pagenavi span.now-page, .pagenavi a:hover {background-color:#000; color:#fff;}
/*footer*/
.footer {text-align:center; font-size:12px; color:#eee; padding:20px; background-color:#222; text-transform:uppercase;}
.footer a {color:#eee;}
/*header*/
.header {background-color:#fff; width:100%;border-bottom: 1px solid #eee;box-shadow: 0px 0px 5px #ddd; position:relative; z-index:5;}
.header .inner {position:relative;}

.breadcrumb {margin-bottom:1%; font-size:12px;  color:#555;}
.breadcrumb a {color:#555;}

.banner {padding-bottom:26.042%; background:no-repeat center center; background-size:cover; box-shadow: 0px 0px 10px #ccc;}
/*logo*/
.logo {float:left; padding:10px 0;}
.logo a {display:block; color:#000; width:190px; height:60px; background:url(images/logo.png) no-repeat left center; background-size:contain; text-indent:-9999em;}
/*nav*/
#nav {margin-left:210px;}
#nav ul {font-size:0; text-align:right; line-height:normal;}
#nav li {display:inline-block; margin-left:5%; font-size:18px; line-height:2em; font-weight:normal; padding:22px 0;}

/*navBtn*/
.navBtn {display: none;}
/*wrapper*/
.wrapper {padding:1.5% 0 3.5%; overflow:hidden;}

/*entry*/
.entry {font-size:16px; line-height: 2em; color:#222; margin-bottom:2.5%; overflow:hidden;}
.entry p,
.entry h1,
.entry h2,
.entry h3,
.entry h4,
.entry h5,
.entry h6,
.entry pre.prism-line-numbers {margin-bottom:2%;}
.entry img {max-width:100%; height:auto!important;}
.entry blockquote {margin:0 2em 2%; overflow: hidden; padding:2% 2% 0; color:#666; background-color:#f9f9f9; border-radius:5px; font-style:italic;}
.entry h4 {font-size:18px;}
.entry ul, .entry ol {padding-left:1em; margin-bottom:2%; margin-left:2em;}
.entry ul li {list-style:outside disc none;}
.entry ol li {list-style:outside decimal none;}
.entry li p {margin-bottom:0;}


/*postTags*/
.postTags {margin-bottom:2%;}
.postTags span {font-weight:bold; color:#000;}
.postTags a {color:#333; margin-left:10px;}
.postTags a:hover {color:#000;}
/*postnavi*/
.postnavi {margin-bottom:3.5%;}
.postnavi p {padding:5px 0;}
.postnavi span {font-weight:bold; color:#000;}
.postnavi a {color:#333;}
.postnavi a:hover {color:#000;}
/*文章列表*/

.blogList {width:103%;}
.blog {width:22%; padding-right:3%; padding-bottom:3%; float:left; text-align:center;}
.blog a {position:relative; color:#fff; display:block; overflow:hidden; box-shadow:0px 0px 10px #ccc;}
.blog .thumbnail {padding-bottom:75%; background:no-repeat center center; background-size:cover;}
.blog .info {overflow:hidden; position:absolute; left:0; top:0; width:100%; height:100%; transition:all .3s;}
.blog .box {width:90%; position:absolute; left:0; bottom:0; padding:5%; transition:bottom .3s; background-image:linear-gradient(to top,rgba(0,0,0,.9),transparent);}
.blog h2 {font-weight:normal; font-size:16px; line-height:1.75em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.blog .meta {overflow:hidden; margin-top:.5%; transition:all .3s;}
.blog .meta span {display:block; font-size:12px; line-height:1.75em;}


/*article*/
.article {padding:2.5% 0;}
.article .title {font-size:28px; text-align:center; line-height: 1.5em; font-weight:normal; margin-bottom:2.5%;}
.article .meta {font-size:0; line-height: normal; text-align:center; margin-bottom:2%; border-bottom:1px dashed #eee; padding-bottom:2%;}
.article .meta span {display:inline-block; font-size:14px; color:#888; padding:0 2%;}
.error {text-align:center;}
/*详情模块标题*/
.boxtitle {font-size:18px; margin-bottom:2.43%; line-height: 1.35em;}
/*评论留言*/
.commentlist {overflow: hidden; margin-bottom:2.43%;}
.commentlist li {overflow: hidden; margin-bottom:2.43%; padding-bottom:2.43%; border-bottom:1px solid #eee;}
.commentlist .avatar {float:left; width:60px; height:60px; border-radius:5px; overflow: hidden;}
.commentlist .avatar img {display:block; width:100%; height:100%;}
.commentlist .info {margin-left:80px; overflow: hidden;}
.commentlist .name {font-size:16px; font-weight:bold; line-height: 1.35em; color:#333;}
.commentlist time {display:block; color:#999; font-size:12px; line-height: 1.5em;}
.commentlist .replay {font-size:12px; font-weight:bold; color:#000;}
.commentlist .text {padding:5px 0; font-size:16px; color:#555;}
.commentlist li li {margin:2.43% 0 0 2%; padding-bottom:0; border-bottom:none;}

/*评论框*/
#comment .item {overflow: hidden; margin-bottom:15px; position:relative;}
#comment label {display:block; float:left; height:40px; line-height: 40px; font-size:16px;}
#comment label i {font-style:normal; color:#f00;}
#comment .input {margin-left:80px; overflow: hidden; border:1px solid #e4e4e4; border-radius:5px;}
#comment .text, #comment textarea {width:98%; height:20px; line-height: normal; padding:10px 1%; font-size:16px; font-family: 'Microsoft Yahei'; -webkit-appearance:none;}
#comment textarea {height:150px; resize: none;}
#comment .submit {float:right; color:#fff; background-color:#555; border-radius:5px; height:45px; width:150px; font-size:16px; cursor:pointer;}
#comment .submit:hover {opacity:.9;}
#comment .verify {position:relative;}
#comment .verify .input {margin-right:126px;}
#comment .verify img {display:block; position:absolute; right:0; top:0; height:100%; width:auto; cursor:pointer; border-radius:2px;}
/*screen width*/
@media only screen and (max-width:1440px){
    .blog {width:30.333%;}
}
@media only screen and (max-width:1280px){
	/*gold*/
	
	
	
	
	.blog h2 {font-size:16px;}
}
@media only screen and (max-width:1080px){
    .logo a {width:127px; height: 40px;}
    #nav {margin-left:130px;}
    #nav li {font-size:16px; line-height:30px; margin-left:3%; padding:15px 0;}
    
    .blog {width:47%;}
}
@media only screen and (max-width:960px){
	/*文章列表*/
    .blog a {box-shadow:0px 0px 5px #ccc;}
	.article .title {margin-bottom:15px;}
	.article .meta {padding-bottom:10px;}
}
@media only screen and (max-width:768px){
    .wrapper {padding:5% 0 12%;}
    .breadcrumb {margin-bottom: 3.5%;}
    .navBtn {width:25px; height:20px; position:absolute; right:10px; top:50%; margin-top:-10px; cursor:pointer; display:block; z-index:10;}
    .navBtn span {position:absolute; left:0; top:50%; margin-top:-0.5px; width:100%; height:1px; background-color:#000;}
    .navBtn span:before, .navBtn span:after {content:''; display:block; width:100%; height:1px; background-color:#000; position:absolute; left:0;}
    .navBtn span:before {top:-8px;}
    .navBtn span:after {bottom:-8px;}
    
    #nav {background-color:#222; position:fixed; left:-200px; width:200px; height:100%; overflow-y:auto; -webkit-overflow-scrolling:touch; transition:left .3s; z-index:9; margin-left:0;}
    #nav.open {left:0;}
    #nav ul {padding:50px 0; text-align:left;}
    #nav li {display:block; line-height:40px; position:relative; padding:5px 0; margin:0;}
    #nav li a {color:#fff; display:block; position:relative; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; padding:0 2em;}
    #nav li a:hover {opacity:0.85;}
    
    
   
   
    
	.banner {padding-bottom:45%;}
    

    .blog h2 {font-size:14px; line-height:2em; max-height:6em; white-space:normal;}

	

	/*pagenavi*/
	.pagenavi a, .pagenavi span.now-page {font-size:12px; height:28px; line-height: 28px; padding:0 10px; margin-top:10px;}
	/*footer*/
	.footer {padding:15px 0; line-height: 1.75em;}





	/*logo*/
	.logo a {width:95px; height: 30px;}	

    
    .article .title {font-size:18px;}
    .article .meta span {font-size:12px;}
	
	.postnavi, .postTags {font-size:12px;}
	

    .commentlist {font-size:14px; line-height: 2em;}
	.commentlist li {margin-bottom:15px; padding-bottom:10px;}
	.commentlist .avatar {width:30px; height:30px;}
	.commentlist .info {margin-left:40px;}
	.commentlist .name {font-size:14px; margin-bottom:5px;}
	.commentlist .replay a {color:#999;}
	.commentlist .text {font-size:14px; line-height: 1.75em;}
	.commentlist li li {margin-top:15px;}
	
	#comment label {font-size:14px; height:35px; line-height: 35px;}
	#comment .input {margin-left:50px;}
	#comment .text, #comment textarea {padding:7.5px 2%; width:96%; font-size:14px;}
	#comment textarea {height:90px;}
	#comment .submit {font-size:14px; height:37px; width:100px;}
	#comment .verify .input {margin-right:111px;}
	#comment .item {font-size:14px;}
	/*768*/	
	.entry {font-size:14px;}
	.entry h4 {font-size:16px;}
	
	.boxtitle {font-size:14px;}
}
@media only screen and (max-width:540px){
    .blogList {width:auto;}
    .blog {width:auto; padding-right:0; float:none; padding-bottom:5%;}
}